<template>
  <el-container>
    <el-main class="charts">
      <!-- 活动阶段 -->
      <el-row class="huodongjieduan" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/xmjd.png" />活动阶段</div>
        </el-col>
        <el-col :span="19">
          <el-scrollbar
            @scroll="handleSourceScroll"
            ref="huodongjieduanScroll"
            always
          >
            <div class="content-box">
              <div
                v-for="item in chartInfo.活动阶段"
                :key="item.id + 'hdjd'"
                class="content-box-item"
                v-html="item.name"
              ></div>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
      <!-- 预期目标 -->
      <el-row class="yuqimubiao" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/yqmb.png" />预期目标</div>
        </el-col>
        <el-col :span="19">
          <div class="content-box" v-html="chartInfo.预期目标"></div>
        </el-col>
      </el-row>
      <!-- 阶段目标 -->
      <el-row class="jieduanmubiao" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/jdmb.png" />阶段目标</div>
        </el-col>
        <el-col :span="19">
          <el-scrollbar
            @scroll="handleSourceScroll"
            ref="jieduanmubiaoScroll"
            always
          >
            <div class="content-box">
              <div
                v-for="item in chartInfo.任务目标"
                :key="item.id + 'rwmb'"
                class="content-box-item"
                v-html="item.title"
              ></div>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
      <!-- 关键路径 -->
      <el-row class="guanjianlujing" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/gjlj.png" />关键路径</div>
        </el-col>
        <el-col :span="19">
          <el-scrollbar always>
            <div class="content-box">
              <div
                v-for="item in chartInfo.关键路径"
                :key="item.id + 'gjlj'"
                class="content-box-item"
                @click="openDialog(item.id, '1')"
              >
                <img src="@/assets/home/gjlj-point.png" />
                <div v-html="item.name"></div>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
      <!-- 核心知识 -->
      <el-row class="hexinzhishi" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/hxzs.png" />核心知识</div>
        </el-col>
        <el-col :span="19">
          <el-scrollbar>
            <div class="content-box">
              <div
                v-for="item in chartInfo.核心知识"
                :key="item.id + 'gjlj'"
                class="content-box-item"
                @click="openDialog(item.id, '2')"
              >
                <div v-html="item.name"></div>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
      <!-- 能力矩阵 -->
      <el-row class="nenglijuzhen" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/nljz.png" />能力矩阵</div>
        </el-col>
        <el-col :span="19">
          <el-scrollbar @scroll="handleSourceScroll" ref="nenglijuzhenScroll">
            <div class="content-box">
              <div
                v-for="item in chartInfo.能力矩阵"
                :key="item.id + 'nljz'"
                class="content-box-item"
              >
                <p v-for="(value, key) in item.matrix" :key="key">
                  {{ key }}:{{ value }}
                </p>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
        <div class="nljz-btn" @click="openEchartsDialog">
          <img src="@/assets/home/icons/nljz-btn.png" />
        </div>
        <div class="nljz-btn zs-btn" @click="downloadZS">
          <el-icon style="color: #ffffff">
            <Download />
          </el-icon>
        </div>
      </el-row>
      <!-- 实验资源 -->
      <el-row class="jieduanmubiao" :gutter="24">
        <el-col :span="5" class="title-box">
          <div><img src="@/assets/home/icons/syzy.png" />实验资源</div>
        </el-col>
        <el-col :span="19">
          <el-scrollbar @scroll="handleSourceScroll" ref="shiyanziyuanScroll">
            <div class="content-box">
              <div
                v-for="item in chartInfo.实验资源"
                :key="item"
                class="content-box-item"
                v-html="item.tools"
              ></div>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <ChartsDialog
    v-model="dialogVisible"
    :id="currenOpentId"
    :projectId="props.projectId"
    :type="openType"
  ></ChartsDialog>
  <ChartsEchartsDialog
    v-model="echartsDialogVisible"
    :projectId="props.projectId"
  ></ChartsEchartsDialog>
  <el-dialog
    title="证书"
    v-model="ZSdialogVisible"
    width="880px"
    class="zs-dialog"
  >
    <el-row style="margin-bottom: 20px">
      <el-col :span="2">
        <el-button icon="Download" type="primary" @click="download"
          >下载</el-button
        >
      </el-col>
    </el-row>
    <div style="height:calc(100% - 60px)">
      <PdfPreview v-if="ZSfullurl" :src="ZSfullurl"></PdfPreview>
    </div>
  </el-dialog>
</template>
<script setup >
import { getSpectrum, getZSurl } from "@/api/home/home";
import ChartsDialog from "./chartsDialog.vue";
import ChartsEchartsDialog from "./chartsEchartsDialog.vue";
import PdfPreview from "@/components/pdfPreview";
const { proxy } = getCurrentInstance();
const props = defineProps({
  projectId: {
    type: String,
  },
});
const chartInfo = ref({});
const huodongjieduanScroll = ref(null);
const jieduanmubiaoScroll = ref(null);
const nenglijuzhenScroll = ref(null);
const shiyanziyuanScroll = ref(null);

const dialogVisible = ref(false);
const currenOpentId = ref(-1);
const openType = ref("");
const echartsDialogVisible = ref(false);
const ZSdialogVisible = ref(false);
const ZSurl = ref("");
const ZSfullurl = ref("");

//同时滚动
function handleSourceScroll(e) {
  huodongjieduanScroll.value.setScrollLeft(e.scrollLeft);
  jieduanmubiaoScroll.value.setScrollLeft(e.scrollLeft);
  nenglijuzhenScroll.value.setScrollLeft(e.scrollLeft);
  shiyanziyuanScroll.value.setScrollLeft(e.scrollLeft);
}
//打开详情面板
function openDialog(id, type) {
  currenOpentId.value = id;
  openType.value = type;
  dialogVisible.value = true;
}
//打开雷达图
function openEchartsDialog() {
  echartsDialogVisible.value = true;
}
//下载证书
function downloadZS() {
  getZSurl({ proId: props.projectId }).then((response) => {
    ZSurl.value = import.meta.env.VITE_APP_BASEURL + response.msg;
    ZSfullurl.value = (import.meta.env.VITE_APP_BASEURL + response.msg).replace(
      "/prod-api",
      ""
    );
    ZSdialogVisible.value = true;
  });
}
/** 下载文件 */
function download() {
  proxy.download(
    "/common/download",
    {
      fileName: ZSurl.value,
      delete: false,
    },
    "证书.pdf"
  );
}
onMounted(() => {
  getSpectrum({ proId: props.projectId }).then((response) => {
    chartInfo.value = response.data;
  });
});
</script>
<style scoped lang="scss">
.charts {
  overflow: unset;
  width: 100%;
  .el-row {
    margin: 20px 0;
    .el-col {
      display: flex;
    }
  }
  .title-box {
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #edf5ff;
      border-radius: 10px;
      min-height: 50px;
      box-shadow: 0px 2px 4px 1px #e3e9f0;
      width: 100%;
      height: 100%;
      color: #046ded;
      img {
        margin-right: 5px;
      }
    }
    padding: 7px 0;
  }
  .el-scrollbar {
    min-width: 100%;
  }
  :deep(.el-scrollbar__wrap) {
    padding: 7px 0;
  }
  .content-box {
    display: flex;
    width: fit-content;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.7);
    .content-box-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 20px 50px;
      margin: 0 10px;
      text-align: center;
      border-radius: 4px;
      background: #fafafa;
      width: 255px;
      max-height: 255px;
      overflow-y: auto;
      :deep(p) {
        margin: 0;
        width: 100%;
      }
      box-shadow: 0px 2px 4px 1px #e3e9f0;
      min-height: 50px;
    }
  }
  .huodongjieduan {
    .content-box-item {
      background: linear-gradient(270deg, #3f92ff 0%, #92c0ff 100%);
      color: #ffffff;
    }
  }
  .yuqimubiao {
    .content-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      background: #fafafa;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0px 2px 4px 1px #e3e9f0;
      margin: 7px 0;
    }
  }
  .jieduanmubiao {
    .content-box-item {
      padding: 10px;
    }
  }
  .guanjianlujing {
    :deep(.el-scrollbar) {
      padding: 7px;
    }
    :deep(.el-scrollbar__wrap) {
      box-shadow: 0px 2px 4px 1px #e3e9f0;
      background: #fafafa;
    }
    .content-box {
      background: url("@/assets/home/gjlj-bg.png") repeat-x;
      background-size: 1090px 110px;
      background-position-y: 30px;
      padding: 30px 10px;
      min-width: 100%;
      .content-box-item {
        cursor: pointer;
        display: block;
        margin: 0 10px;
        position: relative;
        background: transparent;
        box-shadow: 0 0 0;
        font-size: 18px;
        color: #046ded;
        transition: all 0.4s; /* Safari 和 Chrome */ /*加过度的动效 时长0.4S*/
        &:hover {
          margin-top: -10px;
        }

        &:nth-child(4n + 1) {
          top: -35px;
        }
        &:nth-child(4n + 2) {
          top: 20px;
        }
        &:nth-child(4n + 3) {
          top: 0;
        }
        &:nth-child(4n) {
          top: -30px;
        }
        img {
          margin-bottom: 20px;
        }
      }
    }
  }
  .hexinzhishi {
    :deep(.el-scrollbar) {
      padding: 7px;
    }
    :deep(.el-scrollbar__wrap) {
      box-shadow: 0px 2px 4px 1px #e3e9f0;
      background: #fafafa;
      padding: 40px;
    }
    .content-box {
      .content-box-item {
        cursor: pointer;
        width: 120px;
        height: 210px;
        display: block;
        padding: 20px 10px 0 10px;
        margin: 0 20px;
        position: relative;
        color: #046ded;
        box-shadow: 0 0 0;
        transition: all 0.4s; /* Safari 和 Chrome */ /*加过度的动效 时长0.4S*/

        // height: 120px;
        // width: 120px;
        // transform: rotateZ(45deg) skew(-20deg, -20deg);
        // background-color: rgba(76, 106, 255, 0.1);
        // border: 1px solid #4c6aff;
        // margin: 0 70px;
        &:hover {
          margin-top: -10px;
        }
        // div {
        //   position: absolute;
        //   transform: skew(20deg, 20deg) rotateZ(-45deg);
        //   display: inline-block;
        //   left: -10px;
        //   top: 34px;
        //   width: 120px;
        //   overflow: hidden;
        //   text-overflow: ellipsis;
        //   white-space: nowrap;
        //   color: #4c6aff;
        //   font-size: 18px;
        // }
        &:nth-child(2n) {
          top: -20px;
          background: url("@/assets/home/charts-knowledge2.png") no-repeat;
          background-position: center top;
          background-size: 100%;
        }
        &:nth-child(2n + 1) {
          top: 20px;
          background: url("@/assets/home/charts-knowledge.png") no-repeat;
          background-position: center top;
          background-size: 100%;
        }
      }
    }
  }
  .nenglijuzhen {
    position: relative;
    & > div:nth-child(1) {
      top: 50px;
    }
    .nljz-btn {
      position: absolute;
      border-radius: 5px;
      right: -5px;
      top: 20px;
      background: #046ded;
      padding: 3px;
      cursor: pointer;
    }
    .zs-btn {
      top: 60px;
      padding: 4px;
    }
  }
}

@media (min-width: 1200px) {
  .charts .content-box .content-box-item {
    width: 282px;
  }
  .charts .guanjianlujing {
    .content-box {
      background-size: 900px 90px;
      background-position-y: 30px;
      padding: 30px 10px;
      .content-box-item {
        width: 200px;
        &:nth-child(4n + 1) {
          top: -35px;
        }
        &:nth-child(4n + 2) {
          top: 10px;
        }
        &:nth-child(4n + 3) {
          top: 0;
        }
        &:nth-child(4n) {
          top: -30px;
        }
      }
    }
  }
}

@media (min-width: 1920px) {
  .charts .content-box .content-box-item {
    width: 255px;
  }
  .charts .guanjianlujing {
    .content-box {
      background-size: 1090px 110px;
      background-position-y: 30px;
      padding: 30px 10px;
      .content-box-item {
        width: 255px;
        &:nth-child(4n + 1) {
          top: -35px;
        }
        &:nth-child(4n + 2) {
          top: 20px;
        }
        &:nth-child(4n + 3) {
          top: 0;
        }
        &:nth-child(4n) {
          top: -30px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.zs-dialog {
  .el-dialog__body {
    height: 80vh;
  }
}
</style>